{% extends "base.html" %}
{% block head %}
	        <meta charset="UTF-8">
        <title>测试管理系统</title>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <link rel="stylesheet" href="../static/layui/css/layui.css">
        <script src="../static/layui/layui.js"></script>
        <!--     <script type="text/javascript">try { Typekit.load(); } catch (e) { }</script> -->
        <script type="text/javascript" src="../static/js/tool_p.js"></script>
{% endblock head %}
{% block left %}
	{{ super() }}
{% endblock left %}
{% block right %}
	{{ super() }}
	<!-- 修改name（页面名称） -->
	{% set name = '设备管理' %}
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>{{name}}</legend>
	</fieldset>
	<!-- 页面私有部分 -->

	<div style="margin-top:40px;margin-left:50px;width:60%">
		<span data-id = 2 class="layui-btn layui-btn-normal" style="font-size:20px" onclick="devtype(this)">全部</span>
		<span data-id = 0  class="layui-btn layui-btn-normal" style="margin-left:50px;font-size:20px" onclick="devtype(this)">手机</span>
		<span data-id = 1 class="layui-btn layui-btn-normal" style="margin-left:50px;font-size:20px" onclick="devtype(this)">其它</span>

		<span class="site-demo-button" id="add">
			<button id="add1" data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" style="margin-left:50px;font-size:20px">新增设备</button>
		</span>
	</div>

	

	<table id='123' class="layui-table" style="margin-top:40px;margin-left:30px;width:60%">
		<colgroup>
			<col width=20%>
			<col width=15%>
			<col width=15%>
            <col width=15%>
			<col width=15%>
			<col width=25%>
			<col>
		</colgroup>
		<thead>
			<tr>
			<th style="text-align: center; font-weight: bold ;font-size:18px">设备名称</th>
			<th style="text-align: center; font-weight: bold ;font-size:18px">设备状态</th>
			<th style="text-align: center; font-weight: bold ;font-size:18px">借用者姓名</th>
            <th style="text-align: center; font-weight: bold ;font-size:18px">设备系统</th>
			<th style="text-align: center; font-weight: bold ;font-size:18px">设备版本</th>
			<th style="text-align: center; font-weight: bold ;font-size:18px">设备说明</th>
			<th id = 't1' style="text-align: center; font-weight: bold ;font-size:18px">操作</th>
			</tr> 
		</thead>
		<tbody>
			{% for i in alldata %}
				{% if i[2] == 0 %}
				<tr class="table-item">
					{% else %}
				<tr class="table-item" style="color:#FF5722;">
				{% endif %}
					<td style="text-align: center">{{i[1]}}</td>
					<td style="text-align: center">
					{% if i[2] == 0 %}
					组内
					{% else %}
					出借
					{% endif %}
					</td>
					<td style="text-align: center">{{i[3]}}</td>
                    <td style="text-align: center">
                    {% if i[7] == 0 %}
					iOS
					{% elif i[7] == 1 %}
                    Android
                    {% else %}
                    无
					{% endif %}
                    </td>
					<td style="text-align: center">{{i[4]}}</td>
					<td style="text-align: center">{{i[5]}}</td>
                    <td class="t2"  style="text-align: center">
						<div  class="site-demo-button" id="devop" style="margin-bottom: 0;">
							{% if i[2] == 0 %}
								<button data-id={{i[0]}} data-method="offset" data-type="auto" class="layui-btn">外借</button>
							{% else %}
								<button data-id={{i[0]}} data-method="offset" data-type="auto" class="layui-btn layui-btn-danger">归还</button>
							{% endif %}
						 </div>
					</td>
				</tr>
			{% endfor %}
		</tbody>
	</table>

<script>

 	layui.use(['form', 'layedit', 'laydate'], function(){
  		var form = layui.form


	layui.use('layer', function(){ //独立版的layer无需执行这一句
		var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句


		//手机外借按钮弹窗触发
		var use = {
			offset: function(othis){
				var type = othis.data('type')
				,text = othis.text();
				var devid = othis.data('id');
				layer.open({
				type: 1
				,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
				,id: 'all '+devid //防止重复弹出
				,title:"设备外借"
				,content: '<div class="layui-input-inline"><input type="text" name="devname" lay-verify="required|phone" autocomplete="off" placeholder="请输入使用者姓名"  class="layui-input"></div>'
				,btn: '确认'
				,btnAlign: 'c' //按钮居中
				,shade: 0 //不显示遮罩
				,yes: function(index,layero){

					var user = layero.find('input')[0].value;
					var xmlhttp;
			        xmlhttp = new XMLHttpRequest();

			        var data ='{ "devid" : '+ devid +', "user" : "' + user + '"}';
			        xmlhttp.open("POST","usestatus",true);
			        xmlhttp.send(data);
				 	layer.close(index);
					xmlhttp.onreadystatechange = function()
					{
					    {#alert(xmlhttp.status)#}
					    {#if (xmlhttp.status == 302){#}
					    {#    alert(xmlhttp.location)#}
					    {#    location.href = xmlhttp.location;#}
                        {#}#}
				        if (xmlhttp.readyState == 4 && xmlhttp.status == 200 )
				            {
					            if (xmlhttp.responseText == 'ok')
					            {
					              location.reload();
					            }
					            else
					            {
					              alert('请登录')
                                    }
					            }
				          	}
					    }


				});
			}
		};

		$('#123').on('click', 'button', function(){
			var othis = $(this), method = othis.data('method');
			use[method] ? use[method].call(this, othis) : '';
		})

		//手机新增弹窗触发
		var adddev = {
			offset: function(othis){
				var type = othis.data('type')
				,text = othis.text();
				var devid = othis.data('id');
				layer.open({
				type: 1
				,area: ['350px', '500px']
				,title:"新增设备"
				,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
				,id: 'add '+devid //防止重复弹出
				,content:'<form class="layui-form" lay-filter="adddev">\
<div class="layui-form-item" style="line-height:30px;margin-top: 20px"><label class="layui-form-label">设备类型：</label><div class="layui-input-inline">\
<span><select name="devtype" ><option value="">请选择设备类型</option><option value="0">手机</option><option value="1">其他</option></select></span></div></div>\
<div class="layui-form-item" style="line-height:30px;margin-top: 20px"><label class="layui-form-label">设备系统：</label><div class="layui-input-inline">\
<span><select name="devsystem" ><option value="">请选择设备系统</option><option value="1">安卓</option><option value="0">iOS</option><option value="2">其他</option></select></span></div></div>\
<div class="layui-form-item" style="line-height:30px;margin-top: 20px"><label class="layui-form-label">设备名称：</label><div class="layui-input-inline"><input type="text" name="devname" lay-verify="required" autocomplete="off" placeholder="请输入设备名称" class="layui-input"></div></div>\
<div class="layui-form-item" style="line-height:30px"><label class="layui-form-label">设备归属：</label><div class="layui-input-inline"><input type="text" name="peoname" lay-verify="required" autocomplete="off" placeholder="请输入设备归属人" class="layui-input"></div></div>\
<div class="layui-form-item" style="line-height:30px"><label class="layui-form-label">设备版本：</label><div class="layui-input-inline"><input type="text" name="deversion" lay-verify="required" autocomplete="off" placeholder="请输入设备版本" class="layui-input"></div></div>\
<label class="layui-form-label">设备说明：</label><div class="layui-input-inline"><textarea name="devnote" placeholder="请输入设备说明" class="layui-textarea"></textarea></div></form>'
				,btn: '提交'
				,btnAlign: 'c' //按钮居中
				,shade: 0 //不显示遮罩
				,success: function(layero, index){
                    form.render("select","adddev");
                  }
				,yes: function(index,layero){
					var devtype = layero.find('select')[0].value;
					var devsystem = layero.find('select')[1].value;
					var devname = layero.find('input')[2].value;
					var peoname = layero.find('input')[3].value;
					var deversion = layero.find('input')[4].value;
					var devnote = layero.find('textarea')[0].value;

					var xmlhttp;
			        xmlhttp = new XMLHttpRequest();

			        var data ='{ "devtype":"' + devtype + '","devsystem" : "'+ devsystem + '","devname" : "'+ devname +'", "name" : "' + peoname + '","version" : "' + deversion + '", "notes" : "' + devnote + '"}';

			        xmlhttp.open("POST","adddevice",true);
			        xmlhttp.send(data);
				 	layer.close(index);
					xmlhttp.onreadystatechange = function()
					{
				        if (xmlhttp.readyState == 4 && xmlhttp.status == 200 )
				            {
					            if (xmlhttp.responseText == 'ok')
					            {
					              location.reload();
					              alert ("新增成功")
					            }
					            else
					            {
					              alert('请登录')
					            }
				          	}
					    }

					}
				});
			}
		};

		$('#add').on('click', 'button', function(){
			var othis = $(this), method = othis.data('method');
			adddev[method] ? adddev[method].call(this, othis) : '';
		})

	});
	})

</script>

{% endblock right %}
<!-- 此模板现有部分，除页面名称外，其他均不可编辑 -->